<template>
  <div class="boardProductHost new-box" boardProductHost>
    <div class="time-box df">
      <a-input-search class="wid-300" type="text" placeholder="请输入主播名称/主播ID/视频ID" allowClear v-model="search.agentKeyword" @search="query" />
      <a-button icon="rollback" class="go-back-board" @click="goBack">返回看板</a-button>
    </div>
    <div class="product-info df">
      <div class="product-info-item">
        <p class="item-title">日期</p>
        <p class="item-content">{{ getProductInfo.startDate + '至' + getProductInfo.endDate }}</p>
      </div>

      <div class="product-info-item">
        <p class="item-title">商家名称</p>
        <a-tooltip placement="bottom" v-if="getProductInfo.businessName && getProductInfo.businessName.length > 15">
          <template slot="title">
            <div>{{ getProductInfo.businessName || '空' }}</div>
          </template>
          <p class="item-content ellipsis-p">{{ getProductInfo.businessName || '空' }}</p>
        </a-tooltip>
        <p class="item-content" v-else>{{ getProductInfo.businessName || '空' }}</p>
      </div>
      <div class="product-info-item little-item">
        <p class="item-title">站点</p>
        <p class="item-content">{{ getProductInfo.locationName || '空' }}</p>
      </div>
      <div class="product-info-item">
        <p class="item-title">大区</p>
        <p class="item-content">{{ getProductInfo.configName || '空' }}</p>
      </div>
      <div class="product-info-item">
        <p class="item-title">产品ID</p>
        <p class="item-content">{{ getProductInfo.productId || '空' }}</p>
      </div>
      <div class="product-info-item">
        <p class="item-title">产品名称</p>
        <a-tooltip placement="bottom" v-if="getProductInfo.productName && getProductInfo.productName.length > 15">
          <template slot="title">
            <div>{{ getProductInfo.productName || '空' }}</div>
          </template>
          <p class="item-content ellipsis-p">{{ getProductInfo.productName || '空' }}</p>
        </a-tooltip>
        <p class="item-content" v-else>{{ getProductInfo.productName || '空' }}</p>
      </div>
      <div class="product-info-item little-item">
        <p class="item-title">套餐名称</p>
        <a-tooltip placement="bottom" v-if="getProductInfo.productitemName && getProductInfo.productitemName.length > 15">
          <template slot="title">
            <div>{{ getProductInfo.productitemName || '空' }}</div>
          </template>
          <p class="item-content ellipsis-p">{{ getProductInfo.productitemName || '空' }}</p>
        </a-tooltip>
        <p class="item-content" v-else>{{ getProductInfo.productitemName || '空' }}</p>
      </div>
    </div>
    <div class="main-body">
      <a-table :columns="tableColumns" :pagination="false" :data-source="dataList" :scroll="{ x: 600, y: tableHeight }" :loading="isLoading">
        <!-- 主播信息 -->
        <template slot="agentId" slot-scope="text, record">
          <div v-if="record.agentName !== '' && record.agentId !== ''">
            <p>主播名：{{ record.agentName || '主播名' }}</p>
            <p>主播ID：{{ record.agentId || '主播ID' }}</p>
            <p>账户类型：{{ record.accountType || '账户类型' }}</p>
            <!-- <p>视频ID：{{ record.videoId || '空' }}</p> -->
          </div>
          <p v-else>视频ID：{{ record.videoId || '空' }}</p>
        </template>
      </a-table>
    </div>
    <div class="paging-container">
      <a-pagination
        :pageSize="search.pageSize"
        v-model="search.pageIndex"
        :total="pagination.total"
        showQuickJumper
        showLessItems
        :showTotal="(total) => `共 ${total} 条`"
        style="margin: 10px auto;"
        @change="handlePageChange"
      />
    </div>
  </div>
</template>
<script>
import { douJiaColumn } from '../column'
import { productShopHostListUrl } from '@/service/djService'
import '@/assets/style/newStyle.scss'
export default {
  name: 'boardProductHost',
  data() {
    return {
      tableColumns: douJiaColumn.dataBoardProductDetailHost,
      dataList: [],
      search: {
        agentKeyword: '',
        pageIndex: 1,
        pageSize: 10
      },
      pagination: {
        total: 0
      },
      isLoading: false,
      getProductInfo: {}
    }
  },
  mounted() {
    this.getProductInfo = this.$route.query || {}
    this.initQuery()
  },
  methods: {
    /**
     * 分页
     * @param {number} num 当前页码
     * @returns {void}
     */
    handlePageChange(num) {
      this.search.pageIndex = num
      this.query()
    },
    goBack() {
      this.$router.go(-1)
    },
    // 拿参数
    getParams() {
      const { agentKeyword, pageIndex, pageSize } = this.search
      const { startDate = '', endDate = '', configId = '', locationId = '', productitemId } = this.getProductInfo
      return {
        pageIndex,
        pageSize,
        locationId,
        startDate,
        endDate,
        agentKeyword,
        configId,
        productItemId: productitemId
      }
    },
    // 初始化
    initQuery() {
      this.query()
    },
    /**
     * 获取列表
     * @returns {Promise<void>}
     */
    query() {
      this.isLoading = true
      productShopHostListUrl(this.getParams())
        .then((rs) => {
          this.dataList = Object.freeze(rs.list) || []
          this.pagination.total = rs.rowCount || 0
        })
        .finally(() => {
          this.isLoading = false
        })
    }
  }
}
</script>
<style scoped lang="less">
p {
  margin-bottom: 0;
}
.boardProductHost {
  .wid-300 {
    width: 300px;
  }
  .time-box {
    width: 100%;
    justify-content: space-between;
    align-items: center;

    .go-back-board {
      background: #e5e5e5;
      border-radius: 2px;
    }
  }
  .product-info {
    background: url(https://ll-oss-debug.oss-cn-beijing.aliyuncs.com/1654485863463.png) no-repeat;
    background-size: 100% 100%;
    height: 120px;
    padding: 14px 35% 0 24px;
    flex-wrap: wrap;
    margin-top: 10px;
    overflow-y: scroll;
    &-item {
      margin-bottom: 14px;
      min-width: 240px;
      margin-right: 40px;
      .item-title {
        font-size: 10px;
        font-weight: 400;
        color: #999999;
        margin-bottom: 4px;
      }
      .item-content {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
      }
    }
    .little-item {
      min-width: 120px;
    }
    .ellipsis-p {
      width: 240px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
</style>
